<template>
  <div class="parent">
    <div class="userNum" :style="{'width':isCollapse?'45%':'37%'}">
      <UserNum />
    </div>
    <div class="userAge" :style="{'width':isCollapse?'45%':'37%'}">
      <UserAge />
    </div>
  </div>
 

</template>

<script setup>
  import UserNum from '../chart/UserNum.vue';
  import UserAge from '../chart/UserAge.vue';
  import { useSidebarStore } from '../../store/sidebarStore';
  import { computed } from 'vue';

  const sidebarStore = useSidebarStore();
  const isCollapse = computed(() => sidebarStore.isCollapse);

  
</script>

<style>
  .parent {
    width: 100%;
    display: flex;
    background-color: white;
    color: black;
  }
  .userNum {
    margin-right: 20px;
  }
</style>